import { IRootState } from '../index'
import { ActionTree, Module, MutationTree } from 'vuex'
import { CHANGE_SIZE, TOGGLE_SIDEBAR } from '@/store/modules/methods-type'
import { Size } from '@/plugins/element'

export interface IAppState {
  sidebar: { opened: boolean },
  size: Size
}

const mutations: MutationTree<IAppState> = {
  [TOGGLE_SIDEBAR](state) {
    state.sidebar.opened = !state.sidebar.opened
  },
  [CHANGE_SIZE](state, size: Size) {
    state.size = size
  }
}

const actions: ActionTree<IAppState, IRootState> = {
  [TOGGLE_SIDEBAR]({ commit }) {
    commit(TOGGLE_SIDEBAR)
  },
  [CHANGE_SIZE]({ commit }, size: Size) {
    commit(CHANGE_SIZE, size)
  }
}

const app: Module<IAppState, IRootState> = {
  namespaced: true,
  state: {
    sidebar: {
      opened: true
    },
    size: 'medium'
  },
  mutations,
  actions
}

export default app

